﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2>轮播图页面</h2>



<div class="layui-carousel" id="ID-carousel-demo-image">
    <div carousel-item id="lunbotu">
       
    </div>
</div>


<script>
    $(function () {
        Show();
        lunbotu();
    });

    function Show() { 
       
        $.ajax({
            url: 'https://localhost:7061/api/Product/GetProductPages?index=1&size=12',
            type:'get',
            async:false,//把异步变同步,否则后续数据不到位
            success: function (res) {
                var tr = '';
                $(res.data).each(function (i,obj) { //i就是行号
                     tr += ` <div><img src="${obj.imgUrl}"  alt="${i+1}"></div>`;
                });
                $("#lunbotu").html(tr);
            }
        });

    }


    function lunbotu() {
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
        });
    }

</script>